<template>
    <a-drawer
            title=""
            width="420"
            :open="open"
            :closable="false"
            @close="onclose"
            :body-style="settingBody"
    >
        <div class="header">
            <span>关联店铺</span>
            <img src="../assets/version2.0/rootSettingPage/header.png" alt="">
        </div>
        <div class="body">
            <div class="one">
                <span class="title">设备关联</span>

                <a-input class="account" :value="account" @focus="openAccountKeyboard" placeholder="请输入店铺账号"/>
                <a-input class="password" :value="password"  @focus="openPasswordKeyboard" placeholder="请输入店铺密码"/>
                <img v-show="ifInput" class="correct" src="../assets/version2.0/打勾.png">
                <img v-show="ifInput" class="correct" style="top: 144px;" src="../assets/version2.0/打勾.png">
            </div>
            <div class="two">
                <div class="left">
                    <div class="title">关联操作说明</div>
                    <div class="content">1.请扫描右侧二维码，注册并登录管理员账号。</div>
                    <div class="content">2.创建店铺>设置店铺账号和密码</div>
                    <div class="content">3.在本设备中输入该店铺的账号和密码</div>
                </div>
                <div class="right">
                    <div style="background-color: black;border-radius: 50%;width: 100%;height: 100%"></div>
                </div>
            </div>
            <div class="action">
                <BackButton @click="onclose"></BackButton>
                <ConfirmButton @click="loginWithPassword"></ConfirmButton>
            </div>
        </div>
    </a-drawer>
    <key-board :open="accountOrPassword===1" :get-key-board-input="getKey1" @closeKeyBoard="onclose"></key-board>
    <key-board :open="accountOrPassword===2" :get-key-board-input="getKey2" @closeKeyBoard="onclose" @handleOk="loginWithPassword"></key-board>

</template>

<script>


import BackButton from "@/components/BackButton.vue";
import ConfirmButton from "@/components/ConfirmButton.vue";
import API_BASE_URL from "../../config";
import {getAction, postAction} from "@/manage";
import store from "@/store";
import {message} from "ant-design-vue";
import MD5 from "MD5";
import KeyBoard from "@/components/keyBoard.vue";

export default {
    name: "LinkStore",
    components: {KeyBoard, ConfirmButton, BackButton},
    data() {
        return {
            open: false,
            description: "管理员设置页面",
            settingBody: {
                'padding': '8px 0px',
                'justify-content': 'center',
            },
            account: '',
            password: '',
            accountOrPassword:0,
            url: {
                loginWithSerial: "http://api.cgi-gz.com/login-store/with-serial",
                loginWithPassword: "http://api.cgi-gz.com/login-store/with-password"
            },
            ifInput:null
        }
    },
    methods: {
        openAccountKeyboard(){
            this.open = true;
            this.accountOrPassword = 1;
            this.ifInput= false
        },
        openPasswordKeyboard(){
            this.open = true;
            this.accountOrPassword = 2;
            this.ifInput= false
            this.password= ''
        },
        getKey1(val){
            this.account = val;
        },
        getKey2(val){
            this.password = val
        },
        onclose() {
            this.open = false;
            this.accountOrPassword = 0;
            if(store.state.storeAccount){
                this.ifInput = true
                this.password = '******'
            }else {
                this.account=''
                this.password=''
            }
        },
        loginWithPassword() {
            let params = {
                account: this.account,
                serial: store.state.deviceCode,
                password: MD5(this.password)
            }
            // let testParam = {
            //     "account": "T2",
            //     "serial": "2cb962ac5",
            //     "password": "202cb962ac59075b964b07152d234b70"
            // }
            console.log('loginParam',params)
            postAction(this.url.loginWithPassword, params).then((res) => {
                message.success("登录成功")
                message.success("当前店铺账号：" + res.data.data.store_account)
                message.success("当前店铺名称：" + res.data.data.store_name)
                store.commit('setStoreAccount', res.data.data.store_account)
                store.commit('setStoreName', res.data.data.store_name)
                this.ifInput = true
                console.log('店铺：',res)
            }).catch((err) => {
                message.error('账号或密码错误')
            })
        }

    },
    created() {

    },
    mounted() {
        if(store.state.storeAccount){
            this.ifInput = true
            this.account = store.state.storeName
            this.password = '******'
        }
    }
}
</script>

<style scoped>
.header {
    display: grid;
    justify-items: center;
}

.header img {
    width: 100%;
    height: auto;
}

.header span {
    font-size: 18px;
    font-weight: 1000;
}

.body {
    padding: 10px 10px;
    display: grid;
    gap: 14px;
}

.body .one {
    display: grid;
    width: 100%;
    height: 240px;
    background-color: #e1e1e1;
    justify-items: center;
    border-radius: 10px;
    position: relative;
}

.body .one .title {
    font-size: 18px;
    top: 38px;
    position: relative;
    font-weight: 800;
}

.body .one .account {
    width: 280px;
    height: 50px;
    border-radius: 50px;
    font-size: 16px;
    margin-top: 0;
    padding-left: 28px;
}

.body .one .password {
    width: 280px;
    height: 50px;
    border-radius: 50px;
    font-size: 16px;
    margin-top: -40px;
    padding-left: 28px;
}

.body .two {
    border: solid 1px #e1e1e1;
    width: 100%;
    height: 160px;
    border-radius: 10px;
    display: flex;
}

.body .two .left {
    display: grid;
    width: 224px;
    padding: 7px 10px;
}

.body .two .left div {
    line-height: 24px;
    color: #9c9c9c;
}

.body .two .right {
    position: relative;
    width: 43%;
    height: 100%;
    border-radius: 50%;
    padding: 10px 10px;
}

.body .action {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}
.correct{
    width: 36px;
    position: absolute;
    right: 67px;
    top: 81px;
}
</style>